<template>
  <div>
    <div class="workTitle">作业信息</div>
    <div class="formBox">
      <div class="formItem">
        <van-cell title="作业票编号:">
          <template #default>
            <div>{{ formInfoObj?.ticketNo }}</div>
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <van-cell title="作业内容:">
          <template #default>
            <div>{{ formInfoObj?.workContent }}</div>
          </template>
        </van-cell>
        <van-cell title="作业地点:">
          <template #default>
            <div>{{ formInfoObj.workPlace }}</div>
          </template>
        </van-cell>
        <van-cell title="作业单位:">
          <template #default>
            <div>{{ formInfoObj.applyDeptName }}</div>
          </template>
        </van-cell>
        <van-cell title="作业人:">
          <template #default>
            <div>
              <span v-for="item in specialList" :key="item.id">
                {{ item.name }}
              </span>
            </div>
          </template>
        </van-cell>
        <van-cell title="作业负责人:">
          <template #default>
            <div>{{ formInfoObj.fireSupervisorName || '' }}</div>
          </template>
        </van-cell>
        <van-cell title="开始时间:">
          <template #default>
            <div>{{ formInfoObj.startTime }}</div>
          </template>
        </van-cell>
        <van-cell title="结束时间:">
          <template #default>
            <div>{{ formInfoObj?.endTime }}</div>
          </template>
        </van-cell>
        <!-- <van-cell title="作业监护人:">
          <template #default>
            <div>{{ formInfoObj.guardianOpinion?.[0].peopleName || '' }}</div>
          </template>
        </van-cell> -->
        <!-- <van-cell title="措施制定人:">
          <template #default>
            <div>{{ formInfoObj.measureOpinion?.[0].peopleName || '' }}</div>
          </template>
        </van-cell> -->
        <van-cell title="安全交底人:">
          <template #default>
            <div>{{ formInfoObj.safeInstructor || '' }}</div>
          </template>
        </van-cell>
        <van-cell title="接受交底人:">
          <template #default>
            <div>{{ formInfoObj.acceptInstructor || '' }}</div>
          </template>
        </van-cell>
      </div>

      <div class="formItem">
        <van-cell title="作业级别:">
          <template #default>
            {{ formInfoObj.fireWorkLevelName }}
          </template>
        </van-cell>
        <div class="cellCss">
          <div class="cellCssTitle">作业方式:</div>
          <div>
            <van-checkbox-group
              direction="horizontal"
              shape="square"
              v-model="check"
              disabled
            >
              <van-checkbox
                shape="square"
                v-for="item in workMethodOptions"
                :key="item.id"
                :name="item.name"
                >{{ item.name }}</van-checkbox
              >
            </van-checkbox-group>
          </div>
        </div>
        <van-cell title="关联作业票:">
          <template #default>
            {{ formInfoObj.relateTicketCode }}
          </template>
        </van-cell>

        <!-- <div class="cellCss">
          <div class="cellCssTitle">关联图片:</div>
          <div>
            <img class="imgStyle" src="@/assets/logo.png" alt="" />
          </div>
        </div> -->
      </div>
      <div class="formItem">
        <div class="cellCss">
          <div class="cellCssTitle">风险辨识结果:</div>
          <div>
            <van-checkbox-group
              direction="horizontal"
              shape="square"
              v-model="check2"
              disabled
            >
              <van-checkbox
                shape="square"
                v-for="item in dangerOptions"
                :key="item.id"
                :name="item.name"
                >{{ item.name }}</van-checkbox
              >
            </van-checkbox-group>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { workModeListApi, riskIdentificationListApi } from '@/api/dictionary.js'
export default {
  name: 'topForm',
  props: {
    wordId: {
      type: String,
      default: () => '',
    },
    formInfoObj: {
      type: Object,
      default: () => ({
        printingJobId: '',
        fireJobContent: '',
        firePlace: '',
        applicantUnit: '',
        firePeople: '',
        principalOpinion: [
          {
            peopleName: '',
          },
        ],
        guardianOpinion: [
          {
            peopleName: '',
          },
        ],
        measureOpinion: [
          {
            peopleName: '',
          },
        ],
        safetyerOpinion: [
          {
            peopleName: '',
          },
        ],
        fireBeginTime: '',
        fireEndTime: '',
        fireGrade: '',
        relevanceJobId: '',
      }),
    },
    code: {
      type: String,
      default: () => '',
    },
  },
  components: {},
  data() {
    return {
      workMethodOptions: [],
      check: [],
      specialList: [],
      check2: [],
      dangerOptions: [],
    }
  },
  created() {
    this.getWorkMode()
  },
  watch: {
    formInfoObj: {
      // immediate: true,
      deep: true,
      handler(newVal) {
        if (newVal.fireMethod) {
          this.check = this.parseFireWay(newVal.fireMethod)
        }
        if (newVal.riskResult) {
          this.check2 = this.parseFireWay(newVal.riskResult)
        }
        // console.log(newVal.specialHomeworkCertificates)
        this.specialList = newVal.specialHomeworkCertificates.map((item) => {
          return {
            name: item.name,
          }
        })
      },
    },
  },
  methods: {
    async getWorkMode() {
      const res2 = await workModeListApi({
        ticketTypeCode: this.code,
      })
      this.workMethodOptions = res2.data

      const res3 = await riskIdentificationListApi({
        ticketTypeCode: this.code,
      })
      this.dangerOptions = res3.data
    },
    parseFireWay(fireWay) {
      if (!fireWay) return []
      return Array.isArray(fireWay) ? fireWay : fireWay.split(',')
    },
  },

  computed: {},
  filters: {},
}
</script>

<style scoped lang="scss">
.workTitle {
  padding-left: 8px;
  color: #313235;
  font-size: 16px;
  font-weight: bold;
  position: relative;
  margin-bottom: 12px;
}

.workTitle::before {
  content: '';
  position: absolute;
  left: -1px;
  top: 4px;
  border-radius: 2px;
  width: 4px; /* 颜色条的宽度 */
  height: 14px; /* 颜色条的高度 */
  background-color: #0077ff; /* 颜色条的颜色 */
}

.formBox {
  // padding: 16px;
  background: #f7f7f7;
  .formTitle {
    font-weight: bold;
    font-size: 16px;
    color: #2f3133;
    margin-bottom: 16px;
  }
  .formItem {
    border-radius: 10px; /* 设置圆角大小 */
    overflow: hidden; /* 隐藏超出部分 */
    background-color: #fff; /* 可选：设置背景颜色 */
    margin-bottom: 12px;
    .inputCss {
      border: none;
      outline: none;
      background: transparent;
      font-size: 14px;
      text-align: right; /* 添加这行代码 */
    }
    .cellCss {
      box-sizing: border-box;
      width: 100%;
      padding: 10px 16px;
      overflow: hidden;
      color: #323233;
      font-size: 14px;
      line-height: 24px;
      background-color: #fff;
      .cellCssTitle {
        margin-bottom: 10px;
      }
      textarea {
        width: 100%;
        border: none;
      }
      .imgStyle {
        width: 80px;
        height: 80px;
      }
    }
  }
}

.van-cell {
  align-items: center;
  ::v-deep .van-field__label {
    color: #323233 !important ;
  }
}
.van-cell__value {
  overflow: visible;
}
.van-checkbox--horizontal {
  margin-bottom: 6px;
}
</style>
